<template>
  <div class="credit_manage">
    <el-form :inline="true" size="mini">
      <el-form-item label="用户名">
        <el-input v-model="search.accountName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="search.credit_status" @change="changeStatus()">
          <el-option
            v-for="item in CREDIT_STATUS"
            :key="item.val"
            :label="item.name"
            :value="item.val"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button
        type="primary"
        size="mini"
        icon="fa fa-file-excel-o"
        @click="exportExcel()"
      >&nbsp;导出到EXCEL</el-button>
      <el-form-item v-if="multipleSelection.length">
        <span >已选中<span style="color:red;font-size:17px">{{multipleSelection.length}}</span>条数据</span>
        <el-button  type="primary" size="mini" @click="batchApprove()">批量处理</el-button>
      </el-form-item>
    </el-form>
    <div v-if="search.credit_status === CREDIT_STATUS.APPLYING.val">
      <el-table type="mini" :data="applyList" :height="getTableHeight(180)"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" v-if="search.credit_status === CREDIT_STATUS.APPLYING.val"></el-table-column>
        <el-table-column prop="accountName" label="用户名"></el-table-column>
        <el-table-column prop="creditVal" label="消耗积分"></el-table-column>
        <el-table-column label="兑换金额">
          <template slot-scope="scope">{{scope.row.exchangeVal+'元'}}</template>
        </el-table-column>
        <el-table-column prop="date" label="申请时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="approveApply(scope.row)">处理申请</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template v-if="search.credit_status === CREDIT_STATUS.DONE.val">
      <el-table type="mini" :data="applyList" :height="getTableHeight(180)">
        <el-table-column prop="accountName" label="用户名"></el-table-column>
        <el-table-column prop="creditVal" label="消耗积分"></el-table-column>
        <el-table-column label="兑换金额">
          <template slot-scope="scope">{{scope.row.exchangeVal+'元'}}</template>
        </el-table-column>
        <el-table-column prop="date" label="申请时间"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
      </el-table>
    </template>
    <template v-if="search.credit_status === CREDIT_STATUS.REFUSE.val">
      <el-table type="mini" :data="applyList" :height="getTableHeight(180)">
        <el-table-column prop="accountName" label="用户名"></el-table-column>
        <el-table-column prop="creditVal" label="消耗积分"></el-table-column>
        <el-table-column label="兑换金额">
          <template slot-scope="scope">{{scope.row.exchangeVal+'元'}}</template>
        </el-table-column>
        <el-table-column prop="date" label="申请时间"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="approveApply(scope.row)">处理申请</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="paging-block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[15, 20, 30, 40]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  CREDIT_STATUS,
  USER_TYPE,
  EXCHANGE_TYPE,
  SUCCESS_CODE,
  FETCH_CREDIT_APPLY_LIST_FAILED,
  OP_SUCCESS,
  OP_FAIL,
  BACKEND_URL
} from "@/config/config";
import { mapActions } from "vuex";
import ajax from "@/api/ajax"

export default {
  name: "credit_manage",
  data() {
    return {
      USER_TYPE: USER_TYPE,
      CREDIT_STATUS: CREDIT_STATUS,
      EXCHANGE_TYPE: EXCHANGE_TYPE,
      BACKEND_URL: BACKEND_URL,
      pagination: {
        limit: 50,
        total: 5000,
        pageNum: 1
      },
      applyList: [],
      search: {
        accountName: "",
        exchangeType: "",
        credit_status: CREDIT_STATUS.APPLYING.val,
        user_type: USER_TYPE.CUSTOMER,
        exchange_type: EXCHANGE_TYPE.MONEY
      },
      multipleSelection:[]
    };
  },
  methods: {
    ...mapActions("creditManage", [
      "fetchCreditApplyList",
      "handleCreditApply"
    ]),
    fetchApplyList() {
      this.fetchCreditApplyList({
        limit: this.pagination.limit,
        status: this.search.credit_status,
        pageNum: this.pagination.pageNum
      }).then(result => {
        if (result.status === SUCCESS_CODE) {
          this.applyList = result.data.results;
          this.pagination.total = result.data.total;
        } else {
          this.$swal(FETCH_CREDIT_APPLY_LIST_FAILED, "", "error");
        }
        console.log(result);
      });
    },
    handleCurrentChange(currentPage) {
      console.log(this.pagination);
      this.pagination.pageNum = currentPage;
      this.fetchApplyList();
    },
    handleSizeChange(size) {
      this.pagination.limit = size;
      this.fetchApplyList();
    },
    changeStatus() {
      this.fetchApplyList();
    },
    exportExcel() {
      window.open(
        BACKEND_URL +
          "/api/export/excel/credit/exchanges?status=" +
          this.search.credit_status
      );
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    batchApprove(){
     this.$swal
        .fire({
          title: "请输入审核意见",
          html: `
             <textarea id="confirm-textarea" class="swal2-textarea" style="display: flex"></textarea>
             <select id="status" class="swal2-select" style="width: 100%;margin: 0">
                 <option value="0">通过</option>
                 <option value="1">拒绝</option>
             </select>
          `,
          focusConfirm: false,
          allowOutsideClick: false,
          showCloseButton: true,
          confirmButtonText: "确定",
          preConfirm: () => {
            return [
              document.getElementById("confirm-textarea").value,
              document.getElementById("status").value
            ];
          }
        })
        .then(result => {
          result = result.value;
          let updateObj = {
            applyIds: this.multipleSelection.map(item=>item.applyId).join(','),
            remark: result[0] || ""
          };
          switch (result[1]) {
            case "0":
              updateObj["status"] = this.CREDIT_STATUS.DONE.val;
              break;
            case "1":
              updateObj["status"] = this.CREDIT_STATUS.REFUSE.val;
              break;
          }
          ajax.put('/api/credit/apply/exchange/applyIds',updateObj).then(resp=>{
            this.handleOpSuccess(resp.data);
            this.fetchApplyList();
          })
        });
    },
    approveApply(item) {
      this.$swal
        .fire({
          title: "请输入审核意见",
          html: `
             <textarea id="confirm-textarea" class="swal2-textarea" style="display: flex"></textarea>
             <select id="status" class="swal2-select" style="width: 100%;margin: 0">
                 <option value="0">通过</option>
                 <option value="1">拒绝</option>
             </select>
          `,
          focusConfirm: false,
          allowOutsideClick: false,
          showCloseButton: true,
          confirmButtonText: "确定",
          preConfirm: () => {
            return [
              document.getElementById("confirm-textarea").value,
              document.getElementById("status").value
            ];
          }
        })
        .then(result => {
          result = result.value;
          let updateObj = {
            applyId: item.applyId,
            remark: result[0] || ""
          };
          switch (result[1]) {
            case "0":
              updateObj["status"] = this.CREDIT_STATUS.DONE.val;
              break;
            case "1":
              updateObj["status"] = this.CREDIT_STATUS.REFUSE.val;
              break;
          }
          this.handleCreditApply(updateObj).then(result => {
            if (result.status === SUCCESS_CODE) {
              this.$swal(OP_SUCCESS, "", "success");
            } else {
              this.$swal(OP_FAIL, "", "error");
            }
          });
        });
    }
  },
  created() {
    this.fetchApplyList();
  }
};
</script>

<style>
/*.credit_manage .el-input__inner {*/
/*width: 100px;*/
/*}*/
</style>
